<!-- UserProfile.vue -->
<template>
  <div class="user-profile" v-if="user">
    <h2>{{ user.name }}</h2>
    <div class="user-info">
      <p><strong>邮箱:</strong> {{ user.email }}</p>
      <p><strong>角色:</strong> {{ user.role }}</p>
      <p><strong>注册时间:</strong> {{ formatDate(user.createdAt) }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface User {
  id: number
  name: string
  email: string
  role: string
  createdAt: Date
}
const user = ref<User | null>(null) // 使用泛型定义 user 的类型

// 模拟异步数据获取
const fetchUserData = async () => {
  return new Promise<User>((resolve) => {
    setTimeout(() => {
      resolve({
        id: 1,
        name: '张三',
        email: 'zhangsan@example.com',
        role: '管理员',
        createdAt: new Date('2023-01-15'),
      })
    }, 1500)
  })
}
// 在setup顶层使用await，这会使得该组件的setup变成一个异步函数, 这样才能触发Suspense的等待机制
user.value = await fetchUserData()

const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
}

.user-info {
  margin-top: 15px;
}

.user-info p {
  margin: 8px 0;
}
</style>
